<script setup>
import { updateRoughVideoData, processBackEndData } from '@/utils/tool.js';
import { useRouter } from 'vue-router';
import VLoading from "@/components/VLoading.vue";
import videoCarousel from "@/views/course/components/videoCarousel.vue";
import horizontalPicture from "@/views/course/components/horizontalPicture.vue";


let HYY_VideoClass = []
let XW_VideoClass = []
const loading = ref(true)
const router = useRouter()
const roughVideoData = reactive(
  [
    {
      id: 'hanyuyan',
      headImgUrl: 'https://kanekikeh.online/A/CourseVideo/mediumImg/HYY_Vertical.png',
      imgGroup: []
    },
    {
      id: 'xinwen',
      headImgUrl: 'https://kanekikeh.online/A/CourseVideo/mediumImg/XW_Vertical.png',
      imgGroup: []
    }
  ]
)


/** 以下是动画的逻辑判断 */
const clickId = ref(null) // 用户点击传入的id
const overlay = ref(false)  // 遮罩
const animationPlay = ref(false) // 动画完成情况

// 用户点击头部照片事件
const clickHeadImg = (id) => {
  clickId.value = id
  overlay.value = true
  animationPlay.value = true
}
// 设置动画延迟
const getAnimationDelay = (element) => {
  return (element.sortId * 0.1) + 's'; // 计算延迟时间
}

// 动画结束事件
const onAnimationEnd = (element) => {
  overlay.value = false
  if (clickId.value == 'hanyuyan') {
    updateRoughVideoData(roughVideoData[0], HYY_VideoClass, 'hanyuyan');
  }
  else if (clickId.value == 'xinwen') {
    updateRoughVideoData(roughVideoData[1], XW_VideoClass, 'xinwen');
  } else {
    console.log('GO ON')
  }
  animationPlay.value = false
}

/** 跳转视频详情页面 */
const toVideoDetail = (data) => {
  if (data.id === 'hanyuyan') {
    data.subjectBgImg = 'https://kanekikeh.online/A/CourseVideo/videoClass/HYY/bgImg.png'
    data.subjectTag = '汉'
  }
  else {
    data.subjectBgImg = 'https://kanekikeh.online/A/CourseVideo/videoClass/XW/bgImg.png'
    data.subjectTag = '新'
  }
  router.push({ path: '/VideoDetail', query: { videoData: JSON.stringify(data) } })
}


onMounted(async () => {
  HYY_VideoClass = await processBackEndData('hanyuyan')
  XW_VideoClass = await processBackEndData('xinwen')

  updateRoughVideoData(roughVideoData[0], HYY_VideoClass, 'hanyuyan');
  updateRoughVideoData(roughVideoData[1], XW_VideoClass, 'xinwen');

  await nextTick()

  loading.value = false
})

</script>

<template>

  <body>
    <!---------------------------- 轮播图 --------------------------------->
    <videoCarousel />

    <v-container fluid class="pa-4 text-center" id="secondContainer">
      <!---------------------------------- 中图 ----------------------------------->
      <horizontalPicture />

      <!------------------------------- 热门视频布局 ------------------------~------->
      <img class="hotVideo" src="https://kanekikeh.online/A/CourseVideo/popularVideo.png">
      <template v-for=" item in roughVideoData" :key="item">
        <v-row class="d-flex flex-row subject" :id="item.id">

          <template v-if="loading">
            <v-overlay class="overlay" v-model="loading" persistent>
              <VLoading class="vloading" :isLoading=loading />
            </v-overlay>
          </template>

          <template v-else>
            <div class="subjectBgImg" />
            <!-- <div class="subjectBgImg" :style="{ backgroundImage: 'url(' + item.headImgUrl + ')' }" /> -->
            <div class="headImg" :style="{ backgroundImage: 'url(' + item.headImgUrl + ')' }"
              @click="clickHeadImg(item.id)" />
            <div class="content">
              <template v-for="element in item.imgGroup" :key="element.sortId">
                <div :class="{ 'rotate3d': clickId === element.id && animationPlay }"
                  :style="{ backgroundImage: 'url(' + element.img + ')', animationDelay: getAnimationDelay(element) }"
                  @click.capture="toVideoDetail(element)" @animationend="onAnimationEnd(element)" />
              </template>
            </div>
          </template>
        </v-row>
      </template>
    </v-container>

    <v-overlay class="overlay" v-model="overlay" persistent>
      <VLoading class="vloading" :isLoading=loading></VLoading>
    </v-overlay>

  </body>
</template>

<style lang="scss" scoped>
// 定义媒体查询参数
$breakpoints: (
  'phone':320px,
  'pad':481px,
  'notebook':769px,
  'desktop':1025px,
  'tv':1201px
);

// 定义媒体查询混合
@mixin respondTo($breakname) {
  $bp: map-get($breakpoints, $breakname);

  @media(min-width:$bp) {
    @content
  }
}

body {
  width: 100%;
  height: 100%;
  background-color: #F5F5F5;
}

#secondContainer {
  width: 100vw;
}

.hotVideo {
  font-size: 1.5em;
  letter-spacing: 3px;
  margin: 40px 0 20px 0;
}

.subject {
  width: 100%;
  height: calc(100vh - 50vh);
  margin: auto;
  border-radius: 5px;
  align-items: center;
  border: 1px solid #ccc;
  margin-bottom: 5%;
  position: relative;

  &:nth-child(4) {
    // 去除最后一个底部的距离
    margin-bottom: 0;
  }
}

.subjectBgImg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-position: center;
  background-size: cover;
  filter: blur(1px);

  background-color: white;
}


.headImg {
  height: 100%;
  position: relative;
  background-size: cover;
  background-position: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 18%;
  z-index: 2;

  &:hover {
    cursor: pointer;
  }
}

.content {
  border-radius: 5px;
  height: calc(100vh - 55vh);
  width: 78%;
  margin: auto 2%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  z-index: 2;

  &:hover {
    cursor: pointer;
  }


  & div {
    width: 32.5%;
    height: 46%;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
}

.rotate3d {
  /* 添加过渡效果 */
  animation: rotate-3d 3s ease-in-out 1 forwards;
  transform-style: preserve-3d;
  transform: translateZ(0);
  /* 启用硬件加速 */
}

@keyframes rotate-3d {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.overlay {
  width: 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vloading {
  width: 60vw;
  height: 20vw;
}
</style>